<template>
    <scroll-view class="company" scroll-y>
        <template v-for="(company, index) in questions">
            <view class="company__header">
                <view class="company__name">{{ company.name }}</view>
                <view class="company__buttons">
                    <view @click="handleClick(index)" class="company__edit">编辑</view>
                    <view @click="handleDelClick(index)" class="company__edit company__error">删除</view>
                </view>
            </view>    
            <view class="company__item">
                <view v-for="(item, idx) in company.company" class="company__cell">
                    <view class="company__question">{{ item.q }}</view>
                    <view class="company__answer">{{ item.a }}</view>
                </view>
            </view>
        </template>
        
    </scroll-view>
        
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import {  CacheCompanyQuestion } from '@/utils/cache'
import navigator from '@/utils/navigator'
import { onShow } from '@dcloudio/uni-app';

const questions = ref<Array<{ company: Array<{q: string, a: string }>, name: string }>>([])
onMounted(() => {
    questions.value = CacheCompanyQuestion.get()
})
onShow(() => {
    questions.value = CacheCompanyQuestion.get()
})
const handleClick = (index) => {
    navigator.navigateTo(`/pages/add-company/index?i=${index}`)
}
const handleDelClick = (idx) => {
    uni.showModal({
        title: '删除',
        content: '确定删除吗？',
        success(result) {
            if(result.confirm) {
                questions.value.splice(idx, 1)
                CacheCompanyQuestion.set(questions.value)
            }
        },
    })
    
    
}

</script>

<style scoped lang="scss">
.company {
    padding: 16px;
    background-color: $uni-bg-color-grey;
    height: 100vh;
    box-sizing: border-box;
    &__header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding-bottom: 4px;
    }
    &__edit {
      padding: 0px 8px;   
      color: $uni-color-primary;
      font-size: 14px;
    }
    &__error {
        color: $uni-color-error;
    }
    &__buttons {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    &__item {
        margin-bottom: 16px;
        background-color: #fff;
        padding: 16px;
        border-radius: 6px;
    } 
    &__cell {
        margin-bottom: 8px;
    }
    &__question {
        font-size: 14px;
        color: $uni-text-color-placeholder;
    }
    &__answer {
        font-size: 14px;
        color: $uni-text-color;
    }
    &__name{
        font-size: 14px;
        color: $uni-text-color-placeholder;
        flex: 1;
    }
    
}
</style>